<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    需求：网页一打开，咱们有一个input框，要求自动获取焦点？ <hr>
    <!-- <input v-focus /> <hr> -->
    加需求：v-focus.red   input是背景色是红色， v-focus.blue  蓝色   v-focus  灰色 <hr>
    <!-- <input v-focus.red/> -->
    <!-- <input v-focus.blue/> <hr> -->
    在加需求： v-focus = 'fn'  要求可以执行这个fn函数   <hr>
    <input v-focus = "fn" />
  </div>
</body>
<script src="../../lib/vue.global.js"></script>
<script>
  //todo 创建全局自定义指令
  const app = Vue.createApp({
    methods: {
      fn () {
        alert('fn')
      }
    }
  })
  // app.directive(指令名，指令的选项)
  app.directive('focus',{
    mounted (el,binding) {
      /* 
        el 就是当前指令绑定的元素
      */
      // console.log('el',el)
      console.log('binding',binding)
      if (binding.modifiers.red) {
        el.style.background = 'red'
      } else if (binding.modifiers.blue) {
        el.style.background = 'blue'
      } else {
        el.style.background = '#eee'
      }
      binding.value() // fn
      el.focus() // 焦点获取
    }
  })
  app.mount('#app')
</script>
</html>